<template>
	<view class="page">
		<!-- 标题区 -->
		<view class="header">
			<text class="title">服务打卡</text>
			<text class="subtitle">请按照要求填写本次服务信息</text>
		</view>

		<!-- 表单区 -->
		<view class="form-container">
			<form @submit.prevent="onSubmit" class="form-card">
				<!-- 照片上传 -->
				<view class="form-group">
					<text class="label">现场照片</text>
					<view class="upload-area" @click="uploadPhoto">

						<text class="upload-text">点击上传照片</text>
						<text class="upload-hint">支持jpg/png格式，大小不超过5MB</text>
					</view>
					<view class="preview-container">
						<view v-for="(img, index) in photos" :key="index" class="preview-item">
							<image :src="img" mode="aspectFill" class="preview-img" />
							<view class="delete-btn" @click.stop="removePhoto(index)">
								<text class="material-icons">×</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 服务人次 -->
				<view class="form-group">
					<text class="label">服务人次</text>
					<view class="input-wrapper">
						<view class="fuwuinput">
							<input id="peopleCount" type="number" v-model.number="peopleCount" min="1" 
								placeholder="请输入数字" class="input" required />
							<text class="unit">人</text>
						</view>
						<text class="input-hint">请填写本次服务的人数</text>
					</view>
				</view>

				<!-- 现场观察 -->
				<view class="form-group">
					<text class="label">现场观察</text>
					<textarea id="observation" v-model="observation" placeholder="请描述现场情况、服务内容等" 
						class="textarea" rows="4" required />
					<text class="text-counter">{{ observation.length }}/200</text>
				</view>

				<!-- 备注 -->
				<view class="form-group">
					<text class="label">备注</text>
					<textarea id="remark" v-model="remark" placeholder="可填写特殊情况说明（选填）" 
						class="textarea" rows="3" maxlength="100" />
					<text class="text-counter">{{ remark.length }}/100</text>
				</view>

				<!-- 提交按钮 -->
				<button form-type="submit" class="submit-btn" hover-class="submit-btn-hover">
					<text>提交打卡信息</text>
				</button>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		makeSureJob,
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				photos: [],
				peopleCount: null,
				observation: '',
				remark: '',
				taskId: ""
			};
		},
		onLoad(options) {
			this.taskId = options.taskId
		},
		methods: {
			uploadPhoto() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];

						// 检查文件大小
						uni.getFileInfo({
							filePath: tempFilePath,
							success: fileRes => {
								// 先显示预览
								this.photos = [tempFilePath];

								// 上传到服务器
								uni.uploadFile({
									url: 'https://applet.eapchina.net/api/sleep/uploadFile',
									filePath: tempFilePath,
									name: 'file',
									success: (uploadRes) => {
										const data = JSON.parse(uploadRes.data);
										if (data.imgUrl) {
											this.photos = [data.imgUrl];
										}
										uni.showToast({
											title: '照片上传成功',
											icon: 'success'
										});
									},
									fail: (err) => {
										console.error('上传失败:', err);
										uni.showToast({
											title: '上传失败，请重试',
											icon: 'none'
										});
									}
								});
							},
							fail: (err) => {
								console.error('获取文件信息失败:', err);
								uni.showToast({
									title: '获取图片信息失败',
									icon: 'none'
								});
							}
						});
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			removePhoto(index) {
				this.photos.splice(index, 1);
			},
			onSubmit() {
				if (!this.peopleCount || this.peopleCount < 1) {
					uni.showToast({
						title: '请输入有效的服务人次',
						icon: 'none'
					});
					return;
				}
				if (!this.observation.trim()) {
					uni.showToast({
						title: '请输入现场观察',
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '提交中...'
				});

				let data = {
					taskId: this.taskId,
					imgurl: this.photos[0] || "",
					number: this.peopleCount,
					content: this.observation,
					note: this.remark || "",
					createId: uni.getStorageSync('teacher').id
				}
				
				makeSureJob(data).then(res => {
					uni.hideLoading();
					if (res.state === "ok") {
						uni.showToast({
							title: '打卡成功！',
							icon: 'success',
						});

						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({
							title: res.msg || '提交失败',
							icon: 'none'
						});
					}
				}).catch(err => {
					uni.hideLoading();
					console.error('提交失败:', err);
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 24rpx 32rpx;
		background-color: #f7f9fc;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.header {
		text-align: center;
		margin-bottom: 48rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 700;
		color: #1a1a1a;
		margin-bottom: 16rpx;
		letter-spacing: 1rpx;
	}

	.subtitle {
		font-size: 26rpx;
		color: #666;
		max-width: 560rpx;
		margin: 0 auto;
		line-height: 1.5;
	}

	.form-container {
		padding: 8rpx;
	}



	.form-group {
		margin-bottom: 48rpx;
	}

	.label {
		font-size: 28rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		color: #333;
		display: block;
		letter-spacing: 0.5rpx;
	}

	.upload-area {
		border: 2rpx dashed #d1d5db;
		border-radius: 16rpx;
		background-color: #f9fafb;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: all 0.3s ease;
		margin-bottom: 24rpx;
	}

	.upload-area:active {
		background-color: #f3f4f6;
		border-color: #9ca3af;
	}

	.icon-area {
		font-size: 64rpx;
		color: #9ca3af;
		margin-bottom: 16rpx;
	}

	.upload-text {
		font-size: 28rpx;
		color: #4b5563;
		margin-bottom: 8rpx;
	}

	.upload-hint {
		font-size: 22rpx;
		color: #9ca3af;
	}

	.preview-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 24rpx;
	}

	.preview-item {
		position: relative;
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.preview-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.delete-btn {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		color: #ef4444;
		font-size: 28rpx;
	}

	.input-wrapper {
		position: relative;
	}

	.fuwuinput {
		display: flex;
		align-items: center;
		position: relative;
	}

	.input {
		flex: 1;
		padding: 24rpx 80rpx 24rpx 24rpx;
		border-radius: 12rpx;
		border: 1rpx solid #d1d5db;
		font-size: 28rpx;
		color: #333;
		background-color: #fff;
		transition: border-color 0.3s;
	}

	.input:focus {
		border-color: #3b82f6;
	}

	.input::placeholder {
		color: #9ca3af;
	}

	.unit {
		position: absolute;
		right: 24rpx;
		color: #6b7280;
		font-size: 28rpx;
	}

	.input-hint {
		display: block;
		font-size: 22rpx;
		color: #6b7280;
		margin-top: 12rpx;
	}

	.textarea {
		width: 100%;
		min-height: 160rpx;
		padding: 24rpx;
		border-radius: 12rpx;
		border: 1rpx solid #d1d5db;
		font-size: 28rpx;
		color: #333;
		resize: none;
		background-color: #fff;
		box-sizing: border-box;
		transition: border-color 0.3s;
	}

	.textarea:focus {
		border-color: #3b82f6;
	}

	.textarea::placeholder {
		color: #9ca3af;
	}

	.text-counter {
		display: block;
		text-align: right;
		font-size: 22rpx;
		color: #9ca3af;
		margin-top: 12rpx;
	}

	.submit-btn {
		margin-top: 16rpx;
		width: 100%;
		background: linear-gradient(135deg, #3b82f6, #2563eb);
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
		padding: 28rpx 0;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
		transition: all 0.3s;
	}

	.submit-btn:active {
		opacity: 0.9;
		transform: translateY(2rpx);
	}

	.submit-btn-hover {
		opacity: 0.9;
	}

	.material-icons {
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 32rpx;
		display: inline-block;
		line-height: 1;
		text-transform: none;
		letter-spacing: normal;
		word-wrap: normal;
		white-space: nowrap;
		direction: ltr;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		-moz-osx-font-smoothing: grayscale;
		font-feature-settings: 'liga';
	}
</style>